<template>
  <div>
    <public-header :headerData="headerData" :params="params"></public-header>
      <div class="article-list" v-if="activeListData.status && activeListData.data.reset.length>0">
          <active-list :activeData="activeListData" :params="params"></active-list>
      </div>
      <div v-else class="noData">
        <dl class="noComment">
            <dt>〒_〒</dt>
            <dd> 找不到你要搜索的内容，换个关键字在试一次</dd>
          </dl>
      </div>
      <!-- <article-page :articlePageData="activeListData"></article-page> -->
      <public-footer></public-footer>
  </div>
</template>

<script>
// 公用头部
import PublicHeader from '~/components/PublicHeader'
import PublicFooter from '~/components/PublicFooter'
// 首页置顶
import IndexTop from '~/components/IndexTop'
import ActiveList from '~/components/ActiveList'
import ArticlePage from '~/components/ArticlePage'

// vue-ajax
import util from '~/util/serve'
export default {
  // layout: 'header',
 async asyncData ({ params, query ,req}) {
    const headerData = await util.server.get(util.domain.nav);
    const activeData = await util.server.get(`${util.domain.search}?keyword=${encodeURI(query.keyword)}`);
    // params.id = 'js';
    return {
      headerData:headerData.data,
      activeListData: activeData.data,
      params,
      query,
    }
  },
  data(){
    return {
    }
  },
  head () {
    return {
      title: '小明的前端随笔-前端开发',
      meta: [
        { hid: 'description', name: 'description', content: '小明的前端随笔,记录一些需要记录的事' },
        { hid: 'keywords', name: 'keywords', content: '小明的前端随笔 HTML/CSS 前端开发 vue node.js' }
      ]
    }
  },
  components: {
    PublicHeader,
    IndexTop,
    ActiveList,
    ArticlePage,
    PublicFooter
  }
}
</script>

<style lang="less">
.article-right{width:345px;padding-left:15px;float:right;margin-top:15px}
.article-left{background:#fff;overflow:hidden;margin-top:15px}
.article-title{position:relative;margin:0;line-height:35px;padding:7px 20px 6px;font-size:15px;background-color:#eaeaea;height:35px;border-bottom:1px solid #eaeaea;font-weight:400;color:#00a2ca}
.r-select{margin-bottom:15px}
.r-title{position:relative;margin:0;line-height:33px;padding:7px 15px 6px;font-size:15px;color:#00a2ca;background-color:#eaeaea;height:33px;border-bottom:1px solid #eaeaea;font-weight:400}
.r-title{position:relative;margin:0;line-height:33px;padding:7px 15px 6px;font-size:15px;color:#00a2ca;background-color:#eaeaea;height:33px;border-bottom:1px solid #eaeaea;font-weight:400}
.r-input{background:#fff;padding:15px;overflow:hidden}
.widget_search_input{width:250px;height:26px;display:block;float:left;border:1px solid #00a2ca;border-right:none;padding:5px 6px 3px 8px;border-radius:3px 0 0 3px;font-size:14px;font-weight:200}
.widget_search_btn{width:50px;height:36px;display:block;float:left;background:#00a2ca;border:0;border-radius:0 3px 3px 0;color:#fff}
.r-link{background:#fff;overflow:hidden;padding:10px 0}
.r-link li{line-height:35px;padding:0 10px}
.r-link li a{color:#999;display:block;font-weight:200;font-size:14px}
.r-comment{background:#fff;overflow:hidden;padding:0 10px}
.r-comment dl:last-child dd{border-bottom:none}
.r-comment dt{font-size:14px;line-height:25px;padding:5px 0}
.r-comment dt span{float:right;font-size:12px;color:#999;font-weight:200}
.r-comment dd{font-size:12px;color:#999;border-bottom:1px solid #dfdfdf;padding-bottom:15px}
.noComment{ text-align: center; padding: 120px 0 255px 0;}
.noComment dt { font-size: 36px; line-height: 55px; color: #999; font-weight: 200;}
.noComment dd{ font-size: 14px; font-weight: 200; color: #999; padding: 10px 0; border-bottom: none;}

</style>
